<template>
    <div>
        <div class="flex">
            <div class="e-flex-1">
                <div class="container">
                    <div class="admin-index" v-if="loading == false">
                        <div class="e-p-b-30" style="font-size: 18px;">数据中台</div>

                        <div class="e-p-b-15">
                            <el-form ref="form" :model="form"
                                style="border-bottom: 1px solid var(--light);">
                                <el-form-item label="时间范围">
                                    <el-radio-group v-model="form.timeType" size="small" @input="getAll">
                                        <!-- <el-radio-button label="0">全部</el-radio-button> -->
                                        <el-radio-button label="1">今日</el-radio-button>
                                        <el-radio-button label="2">昨日</el-radio-button>
                                        <el-radio-button label="3">本月</el-radio-button>
                                        <el-radio-button label="4">上月</el-radio-button>
                                        <el-radio-button label="5">本季度</el-radio-button>
                                        <el-radio-button label="6">上季度</el-radio-button>
                                        <el-radio-button label="7">本年</el-radio-button>
                                        <el-radio-button label="8">上年</el-radio-button>
                                        <el-radio-button label="9">自定义日期</el-radio-button>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="自定义日期" v-if="form.timeType == 9">
                                    <el-date-picker size="small" v-model="form.date" type="daterange"
                                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                                        value-format="yyyy-MM-dd" @change="setTime" :picker-options="expireTimeOPtion"
                                        :unlink-panels="true">
                                    </el-date-picker>
                                </el-form-item>
                            </el-form>
                        </div>
                        <div class="e-p-b-15">
                            <div class="section">
                                <el-row :gutter="20" type="flex">
                                    <el-col :span="24">
                                        <div class="grid-content">
                                            <div class="admin-statistics-content">
                                                <div class="item e-flex-1">
                                                    <label>注册用户人数</label>
                                                    <div><span class="num">{{ all.databoard.usercount
                                                            }}</span><small>人</small></div>
                                                </div>
                                                <div class="item e-flex-1">
                                                    <label>回收总重量</label>
                                                    <div><span class="num">{{ all.databoard.recovery.weight
                                                            }}</span><small>KG</small></div>
                                                </div>
                                                <div class="item e-flex-1">
                                                    <label>用户订单重量<el-tooltip class="item" effect="dark"
                                                            content="小哥回收的（已入库+未入库）重量" placement="top"><span
                                                                class="el-icon-question e-p-l-4"></span></el-tooltip></label>
                                                    <div><span class="num">{{ all.databoard.userorder.weight
                                                            }}</span><small>KG</small></div>
                                                </div>
                                                <div class="item e-flex-1">
                                                    <label>客户组入库订单重量<el-tooltip class="item" effect="dark"
                                                            content="客户组用户送来站点回收订单的总重量" placement="top"><span
                                                                class="el-icon-question e-p-l-4"></span></el-tooltip></label>
                                                    <div><span class="num">{{ all.databoard.enterprisefitorder.weight
                                                            }}</span><small>KG</small></div>
                                                </div>
                                                <div class="item e-flex-1">
                                                    <label>用户入库订单重量<el-tooltip class="item" effect="dark"
                                                            content="小程序用户送来站点回收订单的总重量" placement="top"><span
                                                                class="el-icon-question e-p-l-4"></span></el-tooltip></label>
                                                    <div><span class="num">{{ all.databoard.fitorder.weight
                                                            }}</span><small>KG</small></div>
                                                </div>
                                                <div class="item e-flex-1">
                                                    <label>线下入库订单重量<el-tooltip class="item" effect="dark"
                                                            content="散客送来站点回收" placement="top"><span
                                                                class="el-icon-question e-p-l-4"></span></el-tooltip></label>
                                                    <div><span class="num">{{ all.databoard.userfitorder.weight
                                                            }}</span><small>KG</small></div>
                                                </div>
                                            </div>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </div>
                        <div class="e-p-b-15">
                            <div class="section">
                                <el-row :gutter="20" type="flex">
                                    <el-col :span="24">
                                        <div class="grid-content">
                                            <div class="admin-statistics-content">
                                                <div class="item e-flex-1">
                                                    <label>订单总数量</label>
                                                    <div><span class="num">{{ all.databoard.recovery.count
                                                            }}</span><small>条</small></div>
                                                </div>
                                                <div class="item e-flex-1">
                                                    <label>订单总金额</label>
                                                    <div><span class="num">{{ all.amount }}</span><small>元</small></div>
                                                </div>
                                                <div class="item e-flex-1">
                                                    <label>用户订单数</label>
                                                    <div><span class="num">{{ all.databoard.userorder.count
                                                            }}</span><small>条</small></div>
                                                </div>
                                                <div class="item e-flex-1">
                                                    <label>客户组入库订单数</label>
                                                    <div><span class="num">{{ all.databoard.enterprisefitorder.count
                                                            }}</span><small>条</small></div>
                                                </div>
                                                <div class="item e-flex-1">
                                                    <label>用户入库订单数</label>
                                                    <div><span class="num">{{ all.databoard.userfitorder.count
                                                            }}</span><small>条</small></div>
                                                </div>
                                                <div class="item e-flex-1">
                                                    <label>线下入库订单数</label>
                                                    <div><span class="num">{{ all.databoard.fitorder.count
                                                            }}</span><small>条</small></div>
                                                </div>
                                            </div>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </div>
                        <div class="section">
                            <div class="flex">
                                <div class="e-flex-1">
                                    <div class="grid-content e-m-r-15">
                                        <div class="section-head e-m-b-15">
                                            <div><span class="blue-span"></span><span>分类占比</span></div>
                                        </div>
                                        <!-- 分类占比 -->
                                        <proportion-chart :id="'main'" :data="all.recyclinganddelivery"></proportion-chart>
                                    </div>
                                </div>
                                <!-- <div class="e-flex-1">
                                <div class="grid-content e-m-r-15">
                                    <div class="section-head e-m-b-15">
                                    <div><span class="blue-span"></span><span>订单转换率</span></div>
                                    </div>
                                    <conversion-chart :id="'main2'"></conversion-chart>
                                </div>
                                </div> -->
                                <div class="e-flex-1">
                                    <div class="grid-content">
                                        <div class="section-head e-m-b-15">
                                            <div><span class="blue-span"></span><span>区域订单分布</span></div>
                                        </div>
                                        <!-- 区域订单分布 -->
                                        <areaorder-chart :id="'main3'" :data="all.areauserorder"></areaorder-chart>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import proportionChart from '@/components/index-echarts/proportion-chart.vue'
import areaorderChart from '@/components/index-echarts/areaorder-chart.vue'
export default {
    // layout: 'admin',
    head() {
        return {
            title: '凤城·' + this.websetting.name,
        }
    },
    components: {
        proportionChart,
        areaorderChart
    },
    data() {
        return {
            dataType: 0,
            loading: true,
            form: {
                timeType: 3,
                date: []
            },
            all: {
                "recyclinganddelivery": [
                    {
                        "type": "废纸",
                        "recycling": 0,
                        "delivery": 0
                    },
                    {
                        "type": "废金属",
                        "recycling": 0,
                        "delivery": 0
                    },
                    {
                        "type": "旧衣物",
                        "recycling": 0,
                        "delivery": 0
                    },
                    {
                        "type": "废塑料",
                        "recycling": 0,
                        "delivery": 0
                    },
                    {
                        "type": "旧家电",
                        "recycling": 0,
                        "delivery": 0
                    },
                    {
                        "type": "其他",
                        "recycling": 0,
                        "delivery": 0
                    }
                ],
                "newuserorder": [
                    // {
                    //   "name": "",
                    //   "address": "",
                    //   "mobile": ""
                    // }
                ],
                "userorder": [
                    // {
                    //   "date": "",
                    //   "completeCount": 0,
                    //   "addCount": 0
                    // }
                ],
                "vehicletype": [
                    // {
                    //   "id": 0,
                    //   "name": "",
                    //   "count": 0
                    // }
                ],
                "areauserorder": [
                    // {
                    //   "name": "",
                    //   "count": 0
                    // }
                ],
                "brotherandstore": [
                    // {
                    //   "name": "",
                    //   "brotherCount": 0,
                    //   "storeCount": 0
                    // }
                ],
                databoard:{
                    enterprisefitorder:{
                        count:0,
                        weight:0
                    },
                    fitorder:{
                        count:0,
                        weight:0
                    },
                    recovery: {
                        count:0,
                        weight:0
                    },
                    usercount: 0,
                    userfitorder:{
                        count:0,
                        weight:0
                    },
                    userorder:{
                        count:0,
                        weight:0
                    }
                },
                amount: 0
            },
            expireTimeOPtion: {
                disabledDate(time) {
                    return time.getTime() > Date.now() - 8.64e6;  //如果没有后面的-8.64e6就是不可以选择今天的
                }
            },
            integrals: {
                integrals: 0,
                useintegrals: 0,
                amount: 0
            }
        }
    },
    computed: {

    },
    mounted() {
        this.getAll()
    },
    methods: {
        setTime(e) {
            console.log(this.form.date)
            this.getAll()
        },
        getAll() {
            this.loading = true
            let form = {
                timeType: this.form.timeType,
                accountId: this.$route.query.accountId
            }
            if (this.form.date !== null) {
                if (this.form.date.length > 0) {
                    form.start = this.form.date[0]
                    form.end = this.form.date[1]
                }
            }
            this.$axios.post('/Statistics/IncomeAndPay', form).then((res) => {
                let obj = {
                    recyclinganddelivery: [
                        {
                            "type": "废纸",
                            "recycling": 0,
                            "delivery": 0
                        },
                        {
                            "type": "废金属",
                            "recycling": 0,
                            "delivery": 0
                        },
                        {
                            "type": "旧衣物",
                            "recycling": 0,
                            "delivery": 0
                        },
                        {
                            "type": "废塑料",
                            "recycling": 0,
                            "delivery": 0
                        },
                        {
                            "type": "旧家电",
                            "recycling": 0,
                            "delivery": 0
                        },
                        {
                            "type": "其他",
                            "recycling": 0,
                            "delivery": 0
                        }
                    ],
                    newuserorder: res.newuserorder,
                    userorder: res.userorder,
                    vehicletype: res.vehicletype,
                    areauserorder: res.areauserorder,
                    brotherandstore: res.brotherandstore,
                    databoard:res.databoard,
                    amount: res.amount
                }

                res.recyclinganddelivery.forEach((item,i)=>{
                    if(item.type == '废纸'){
                        obj.recyclinganddelivery[0].recycling = item.recycling
                        obj.recyclinganddelivery[0].delivery = item.delivery
                    }else if(item.type == '废金属'){
                        obj.recyclinganddelivery[1].recycling = item.recycling
                        obj.recyclinganddelivery[1].delivery = item.delivery
                    }else if(item.type == '旧衣物'){
                        obj.recyclinganddelivery[2].recycling = item.recycling
                        obj.recyclinganddelivery[2].delivery = item.delivery
                    }else if(item.type == '废塑料'){
                        obj.recyclinganddelivery[3].recycling = item.recycling
                        obj.recyclinganddelivery[3].delivery = item.delivery
                    }else if(item.type == '旧家电'){
                        obj.recyclinganddelivery[4].recycling = item.recycling
                        obj.recyclinganddelivery[4].delivery = item.delivery
                    }else if(item.type == '其他'){
                        obj.recyclinganddelivery[5].recycling = item.recycling
                        obj.recyclinganddelivery[5].delivery = item.delivery
                    }
                })

                this.all = obj
                this.loading = false
            }).catch((err) => {
                this.loading = false
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.container {
    // min-height: auto;
}

.admin-index {
    .section {
        &+.section {
            margin-top: 15px;
        }

        .section-head {
            display: flex;
            align-items: center;

            .blue-span {
                background-color: var(--blue);
                width: 3px;
                height: 14px;
                display: inline-block;
                margin-right: 15px;
            }
        }
    }

    .tips-box {
        padding: 15px;

        .title {
            font-size: 20px;
            margin-bottom: 30px;
        }

        dl {
            dt {
                font-size: 14px;
                margin-bottom: 15px;

                &:before {
                    content: '';
                    width: 10px;
                    height: 10px;
                    display: inline-block;
                    background-color: #e4e4e4;
                    border-radius: 10px;
                    margin-right: 12px;
                }
            }

            dd {
                font-size: 14px;
                color: var(--grey);
                margin-left: 22px;
            }
        }
    }

    .upload-demo {
        width: 100%;

        .el-upload-dragger {
            width: 100%;
        }
    }

    .grid-content {
        background-color: #fff;
        padding: 15px;
        height: calc(100% - 30px);
        border: 1px solid var(--light);
        // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }

    .admin-statistics-content {
        display: flex;

        .item {
            &+.item {
                border-left: 1px solid var(--light);
                padding-left: 30px;
            }

            .icon {
                width: 44px;
                height: 44px;
                border-radius: 50%;
                border: 1px solid var(--light);
                background-color: #f2f3f5;
                padding: 5px;
                margin: 0 20px 0 0;
                box-shadow: 3px 2px 11px 0 rgb(70 70 70 / 22%);
            }

            label {
                color: var(--grey);
                font-size: 12px;
                margin-bottom: 5px;
                display: block;
            }

            .num {
                font-size: 30px;
            }
        }
    }
}

// 公告
.notice-list {
    .item {
        display: flex;
        align-items: center;
        width: 100%;
        height: 24px;
        margin-bottom: 4px;

        .item-content {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-left: 4px;
            color: var(--dark);
            text-decoration: none;
            font-size: 13px;
            cursor: pointer;
        }
    }
}

// 待办事项
.todo-list {
    .item {
        display: flex;
        border-bottom: 1px solid var(--border-light);
        padding: 15px 0;

        &:last-child {
            border-bottom: 0;
        }

        .icon {
            width: 40px;
            height: 40px;
            color: #fff;
            background-color: var(--orange);
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 3px;
            margin-right: 10px;

            &.t1 {
                background-color: var(--orange)
            }

            &.t2 {
                background-color: var(--green)
            }

            &.t3 {
                background-color: var(--cyan)
            }

            &.t4 {
                background-color: var(--primary)
            }
        }

        .item-content {
            .tname {
                font-size: 14px;
            }

            .text {
                font-size: 14px;
                color: var(--dark);
                padding: 3px 0;
            }

            .date {
                font-size: 12px;
                color: var(--grey);
            }
        }
    }
}

//快捷操作
.short-cuts {
    .item {
        font-size: 12px;
        text-align: center;
        display: inline-block;
        width: 33.33%;
        margin-bottom: 15px;

        .icon {
            width: 36px;
            height: 36px;
            color: var(--grey);
            background-color: var(--light);
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 3px;
            margin: 0 auto;
        }

        .tname {
            margin-top: 5px;
        }
    }
}
</style>